<template>
	<view class="message">
		<titleName :name="name"></titleName>
		<view class="user-wrap" v-if="usertype==1">
			<view class="title-bgc"></view>
			<view class="search-wrap">
				<view class="ipt-wrap">
					<input type="text" v-model="params.title" placeholder="搜索信息" placeholder-class="ipt-style" />
					<!-- <image  src="../../static/search.png" mode=""></image> -->
					<button @click="getList()">搜索</button>
				</view>
			</view>
			<view class="list">
				<uni-load-more iconType="circle" status="loading" v-if="flagData" />
				<noData v-if="dataList.length==0 && !flagData" />
				<view class="item" @click="jumpEnvironmentDetail(item.id,item.noticeid,item.noticetype)"
					v-for="item in dataList" :key="item.id">
					<view class="left">
						<image :src="resourceUrl+'msg-inform.png'" mode=""></image>
						<view class="num" v-if="item.readstatus">{{item.readstatus}}</view>
					</view>
					<view class="item-content-wrap">
						<view class="top">
							<view class="name">{{item.title}}</view>
							<view class="time">{{item.committime}}</view>
						</view>
						<view class="btm">
							<view class="name">发布单位：{{item.publisher}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="manage-wrap" v-if="usertype==9">
			<view class="search-wrap">
				<view class="ipt-wrap">
					<input type="text" v-model="params.enterprisename" placeholder="请输入企业名称"
						placeholder-class="ipt-style" />
					<button @click="getList(1)">搜索</button>
				</view>
				<uni-datetime-picker v-model="single" @maskClick="maskClick" type="daterange" @change="dateChange">
					<image class="date-icon" :src="resourceUrl+'msg-date.png'" mode=""></image>
				</uni-datetime-picker>
			</view>
			<view class="single-choice">
				<uni-data-select v-model="params.noticetype" :localdata="allWarning"
					@change="changeWarning"></uni-data-select>
				<uni-data-select v-model="params.status" :localdata="allStatus"
					@change="changeStatus"></uni-data-select>
			</view>
			<view class="total-num" v-if="dataList.length>0">
				<!-- 共有 <text>{{dataList.length}}/{{total}}</text> 条记录 -->
				共有 <text>{{total}}</text> 条记录
			</view>
			<uni-load-more iconType="circle" status="loading" v-if="flagData" />
			<noData v-if="dataList.length==0 && !flagData" />
			<scroll-view class="list" scroll-y @scrolltolower="scrolltolower">
				<view class="item" v-for="(item,index) in dataList" :key="item.id"
					@click="jumpDetail(item.id,item.enterpriseid,item.noticetype,item.noticeid)">
					<view v-if="item.noticetype!=9"
						:class="['title',item.data5==1?'bgc-one':item.data5==2?'bgc-two':'bgc-three'] ">
						<view class="name">公司名称：{{item.enterprisename}}</view>
						<image :src="resourceUrl+'right-arrow.png'" mode=""></image>
					</view>
					<view v-if="item.noticetype==9"
						:class="['title',item.data5==1?'bgc-one':item.data5==2?'bgc-two':'bgc-three'] ">
						{{item.subnoticetype==91?'红色预警（I级）':item.subnoticetype==92?'橙色预警（II级）':item.subnoticetype==93?'黄色预警（III级）':''}}
						<image :src="resourceUrl+'right-arrow.png'" mode=""></image>
					</view>
					<view class="content-wrap">
						<view class="type" v-if="item.noticetype!=9">
							<view class="name">{{item.title}}</view>
							<view :class="item.viewflag?'status':'no-down'">{{item.viewflag?'已查看':'未查看'}}</view>
						</view>
						<view class="type" v-if="item.noticetype==9">
							<view class="name time">启警时间：{{(item.data3).substring(0,item.data3.length-3)}}</view>
							<!-- <view :class="item.viewflag?'status':'no-down'">{{item.viewflag?'已查看':'未查看'}}</view> -->
						</view>
						<template v-if="item.noticetype==9">
							<view class="type-one">
								<view class="name">发布者：</view>
								<view class="val">{{item.data4}}</view>
							</view>
						</template>
						<template v-if="item.noticetype==1">
							<view class="type-one">
								<view class="name">污染源类别：</view>
								<view class="val">{{item.data3}}</view>
							</view>
							<view class="type-two">
								<view class="name">污染物名称：</view>
								<view class="val">{{item.data4}}</view>
							</view>
						</template>
						<template v-if="item.noticetype==2">
							<view class="type-one">
								<view class="name">检测设备：</view>
								<view class="val">{{item.data3}}</view>
							</view>
						</template>
						<template v-if="item.noticetype==3">
							<view class="type-one">
								<view class="name">有效期限：</view>
								<view class="val">{{item.data3}}</view>
							</view>
						</template>
						<template v-if="item.noticetype==4">
							<view class="type-one">
								<view class="name">整改内容：</view>
								<view class="val">{{disposeContent(item.content).preContent}}</view>
							</view>
						</template>
						<template v-if="item.noticetype==5">
							<view class="type-one">
								<view class="name">报告类型：</view>
								<view class="val">
									{{item.subnoticetype==51?'月报':item.subnoticetype==52?'季报':item.subnoticetype==53?'年报':''}}
								</view>
							</view>
						</template>

						<view class="time-status">
							<view class="time">
								<view class="name">{{item.noticetype==9?'发布时间：':'提醒时间：'}}</view>
								<view class="val">{{item.committime }}</view>
							</view>
							<view v-if="item.noticetype==4" :class="item.followflag?'status':'no-down'">
								{{item.followflag?'已执行':'未执行'}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import disposeContent from '../../utils/disposeContent'
	import {
		resourceUrl
	} from '../../request/config'
	import http from '../../request/index.js'
	import {
		reactive,
		ref,
		watch
	} from 'vue'
	import {
		onShow,
		onLoad,
		onHide,

	} from "@dcloudio/uni-app"
	let name = "消息"
	let seltop = ref(1)
	let dataList = ref([])
	let title = ref('')
	let single = ref('')
	let flagData = ref(true)
	let usertype = ref('')
	let params = ref({})
	let page = ref(1)
	let pagesize = ref(10)
	let total = ref('')
	let allWarning = ref([{
		value: 1,
		text: "自行监测提醒"
	}, {
		value: 2,
		text: "在线监测提醒"
	}, {
		value: 3,
		text: "证件到期提醒"
	}, {
		value: 4,
		text: "整改期限提醒"
	}, {
		value: 5,
		text: "定期报告提醒"
	}, {
		value: 9,
		text: "预警管控提醒"
	}, ])

	let allStatus = ref([{
		value: 1,
		text: "已查看"
	}, {
		value: 2,
		text: "未查看"
	}])
	watch(() => params.value.noticetype, () => {
		if (params.value.noticetype == 4) {
			allStatus.value = [{
				value: 1,
				text: "已查看"
			}, {
				value: 2,
				text: "未查看"
			}, {
				value: 3,
				text: "已执行"
			}, {
				value: 4,
				text: "未执行"
			}]
		} else {
			allStatus.value = [{
				value: 1,
				text: "已查看"
			}, {
				value: 2,
				text: "未查看"
			}]
			if (params.value.status == 3 || params.value.status == 4) {
				params.value.status = ''
			}
		}
		getList()
	}, {
		deep: true,
		immediate: true,

	})
	let singleChoice = ref(0)
	let changeWarning = () => {
		dataList.value = []
		page.value = 1
		pagesize.value = 10
		// getList()
	}
	let changeStatus = () => {
		dataList.value = []
		page.value = 1
		pagesize.value = 10
		getList()
	}
	// let selChange = (id) => {
	// 	singleChoice.value = id
	// 	params.value.noticetype = id
	// 	getList()
	// }
	/* 企业端 */
	let jumpEnvironmentDetail = (id, noticeid, noticeidtype) => {
		if (noticeidtype == 9) {
			uni.navigateTo({
				url: `/homePageOther/enterprisewarningcontroldetail/index?id=${noticeid}`

			})
		} else {
			uni.navigateTo({
				url: `/messagePageOther/messageDetail/index?id=${id}&noticeid=${noticeid}`

			})
		}
	}
	/* 管理端 */
	let jumpDetail = (id, enterpriseid, noticeidtype, noticeid) => {
		if (noticeidtype == 9) {
			uni.navigateTo({
				url: `/homePageOther/warningcontroldetail/index?id=${noticeid}`
				// url: `/homePageOther/environmentdetail/index?id=${id}`
			})
		} else {
			uni.navigateTo({
				url: `/messagePageOther/managemessageDetail/index?id=${id}&enterpriseid=${enterpriseid}`
				// url: `/homePageOther/environmentdetail/index?id=${id}`
			})
		}

	}
	let scrolltolower = () => {
		if (total.value === data
		.value.length) return
		page.value += 1
		getList()
		console.log('onReachBottomDistance');
	}
	let changeOne = () => {
		seltop.value = 1
		getList()
	}
	let changeTwo = () => {
		seltop.value = 2
		getList()
	}
	onHide(() => {

		dataList.value = []
		page.value = 1
		pagesize.value = 10
		params.value.enterprisename = ''
	})
	onShow(() => {
		usertype.value = uni.getStorageSync('usertype')
		// if (usertype.value == 9) {
		// 	params.value.noticetype = singleChoice.value
		// }
		dataList.value = []
		page.value = 1
		pagesize.value = 10
		getList()
	})

	let maskClick = () => {
		params.value.startdate = ''
		params.value.enddate = ''
		single.value = ''
	}
	let dateChange = (e) => {

		if (e.length != 0) {
			params.value.startdate = e[0]
			params.value.enddate = e[1]
		} else {
			params.value.startdate = ''
			params.value.enddate = ''
		}


	}
	let getList = (num) => {

		if (usertype.value == 9) {
			if (num == 1) {
				dataList.value = []
				page.value = 1
				pagesize.value = 10

			}
			http({
				url: '/greenAdmRecvMessage/datalist',
				data: {
					...params.value,
					page: page.value,
					pagesize: pagesize.value
				}
			}).then((res) => {

				if (res.code == 0) {
					flagData.value = false
					let result = res.data.list
					dataList.value.push(...result)
					total.value = res.data.total
				} else {
					flagData.value = false
				}
			})
		} else {
			http({
				url: '/greenMessage/datalistv2',
				data: {
					...params.value,
				}
			}).then((res) => {


				if (res.code == 0) {
					flagData.value = false
					dataList.value = res.data.list
					total.value = res.data.total
				} else {
					flagData.value = false
				}
			})
		}


	}
</script>

<style lang="scss" scoped>
	:deep(.ipt-style) {

		font-weight: 400;
		font-size: 25rpx;
		color: #ABABBB;

	}

	:deep(.uni-icons) {
		font-size: 12upx;
	}

	:deep(.uni-select) {
		width: 313rpx;
		height: 59rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		border: 1px solid #999999;

		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 24rpx;
		color: #4F5153;

	}

	.message {
		width: 100vw;
		height: 100vh;
		// padding-top: 160rpx;
		overflow: hidden;

		.manage-wrap {
			height: calc(100vh - 160upx);
			width: 100vw;
			background: #F3F5F7;

			.list {
				height: calc(100vh - 160upx - 79upx - 146upx - 55upx - 40upx);
				overflow: scroll;
				display: flex;
				flex-direction: column;
				// padding: 0 26upx;
				padding: 0 26upx 60upx 26upx;
				align-items: center;

				.item:first-child {
					margin-top: 0upx !important;
				}

				.item {
					width: 699rpx;
					margin-top: 26upx;
					background: #FFFFFF;
					border-radius: 21rpx;

					.bgc-one {
						background: url("https://splendid.oss-cn-beijing.aliyuncs.com/static/greenenterprise/color-one.png") no-repeat;
						background-size: cover;
					}

					.bgc-two {
						background: url("https://splendid.oss-cn-beijing.aliyuncs.com/static/greenenterprise/color-two.png") no-repeat;
						background-size: cover;
					}

					.bgc-three {
						background: url("https://splendid.oss-cn-beijing.aliyuncs.com/static/greenenterprise/color-three.png") no-repeat;
						background-size: cover;
					}

					.title {
						height: 84rpx;
						display: flex;
						align-items: center;
						padding-left: 28upx;
						padding-right: 45upx;
						justify-content: space-between;
						border-bottom: 1rpx solid #DADADA;

						.name {

							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 31rpx;
							color: #1A1D1C;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

						}

						image {
							width: 16upx;
							height: 27upx
						}
					}

					.content-wrap {
						padding: 0 30upx;



						.type {
							margin-top: 27upx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #0E0E0E;
							display: flex;
							justify-content: space-between;

							.name {

								font-family: Source Han Sans CN;
								font-weight: 500;
								font-size: 28rpx;
								color: #0E0E0E;

							}

							.name.time {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.status {

								font-family: Source Han Sans CN;
								font-weight: 500;
								font-size: 26rpx;
								color: #0874FA;
								width: 104rpx;
								height: 46rpx;

								border-radius: 7rpx;
								background-color: rgb(206, 227, 254);
								line-height: 46upx;
								text-align: center;
								flex-shrink: 0;
							}

							.no-down {
								font-family: Source Han Sans CN;
								font-weight: 500;
								font-size: 26rpx;
								color: #FA0808;
								width: 104rpx;
								height: 46rpx;

								border-radius: 7rpx;
								background-color: rgba(255, 0, 48, .2);
								line-height: 46upx;
								text-align: center;
								flex-shrink: 0;
							}
						}

						.type-one {
							margin-top: 27upx;
							display: flex;
							align-items: center;


							.name {

								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 28rpx;
								color: #666666;
								flex-shrink: 0;
							}

							.val {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 28rpx;
								color: #333333;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
						}

						.type-two {
							margin-top: 27upx;
							display: flex;
							align-items: center;


							.name {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 28rpx;
								color: #666666;
								flex-shrink: 0;
							}

							.val {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 28rpx;
								color: #333333;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.time-status {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 93upx;
							border-top: 1rpx solid #E6E6E6;
							align-items: center;
							margin-top: 27upx;
							// padding-right: 6upx;

							.time {

								display: flex;
								align-items: center;

								.name {
									font-family: Source Han Sans CN;
									font-weight: 400;
									font-size: 28rpx;
									color: #666666;
								}

								.val {
									font-family: Source Han Sans CN;
									font-weight: 400;
									font-size: 28rpx;
									color: #333333;
								}
							}

							.status {
								width: 104rpx;
								height: 46rpx;
								background: rgb(206, 227, 256);
								border-radius: 7rpx;

								line-height: 46upx;
								text-align: center;

								font-family: Source Han Sans CN;
								font-weight: 500;
								font-size: 26rpx;
								color: #0874FA;

							}

							.no-down {
								width: 104rpx;
								height: 46rpx;

								border-radius: 7rpx;

								line-height: 46upx;
								text-align: center;

								font-family: Source Han Sans CN;
								font-weight: 500;
								font-size: 26rpx;

								background: rgb(254, 206, 206);
								color: #FF0000;
							}
						}
					}

				}
			}

			.total-num {
				padding-left: 28upx;
				height: 63upx;
				display: flex;
				align-items: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #222222;

				text {
					color: #0874FA;
				}
			}

			.single-choice {
				width: 100vw;
				height: 97upx;
				display: flex;
				flex-wrap: wrap;
				background-color: #fff;
				padding: 0 38upx;
				justify-content: space-between;



				.name:nth-of-type(4),
				.name:nth-of-type(1) {
					margin-left: 0upx;
				}

				.name {
					width: 216rpx;
					height: 69rpx;
					background: #F7F7F7;
					border-radius: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 27rpx;
					color: #27292B;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 25upx;
				}

				.active {
					background-color: #0874FA;
					color: #fff;
				}
			}

			.search-wrap {
				background-color: #fff;
				height: 146upx;
				padding: 35upx 48upx 22upx 20upx;
				display: flex;
				align-items: center;

				.date-icon {
					width: 43upx;
					height: 40upx;
					margin-left: 24upx;
				}

				.ipt-wrap {
					width: 617rpx;
					height: 73rpx;
					background: #FFFFFF;
					border-radius: 36rpx;
					border: 1px solid #E9E9E9;
					display: flex;
					align-items: center;
					padding-left: 30upx;

					input {
						flex: 1;
					}

					button {
						flex-shrink: 0;
						width: 112rpx;
						height: 73rpx;
						background: #0874FA;
						border-radius: 14rpx;
						line-height: 73upx;
						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;

					}
				}
			}
		}

		.user-wrap {
			.list {
				height: calc(100vh - 57rpx - 160rpx - 50upx);
				padding: 0 29upx 40upx 28upx;
				overflow: scroll;

				.item {
					display: flex;
					align-items: center;
					height: 175upx;
					border-bottom: 1rpx solid #EDF2F2;

					.left {
						margin-right: 22upx;
						position: relative;

						image {
							width: 92rpx;
							height: 92rpx;

						}

						.num {
							position: absolute;
							right: -5upx;
							top: -5upx;
							width: 36rpx;
							height: 36rpx;
							background: #FA5F4D;
							border-radius: 50%;
							text-align: center;
							line-height: 36upx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 25rpx;
							color: #FFFFFF;

						}
					}

					.item-content-wrap {
						display: flex;
						flex-direction: column;
						height: 92rpx;
						justify-content: space-between;
						width: calc(100vw - 92upx - 22upx - 28upx);
						padding-right: 20upx;

						.top {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;

							.name {
								font-family: Microsoft YaHei;
								font-weight: 400;
								font-size: 35rpx;
								color: #34363A;

								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}

							.time {
								font-family: Microsoft YaHei;
								font-weight: 400;
								font-size: 24rpx;
								color: #96989F;
								flex-shrink: 0;


							}
						}

						.btm {

							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;

							.name {
								font-family: Microsoft YaHei;
								font-weight: 400;
								font-size: 28rpx;
								color: #96989F;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;

							}
						}
					}
				}
			}

			.title-bgc {
				background: #F3F5F7;
				height: 27rpx;
				width: 100vw;

			}

			.search-wrap {
				width: 100vw;
				padding: 25rpx 30rpx 32rpx 30rpx;
				background-color: #fff;

				.select {
					padding-left: 4rpx;
					margin-top: 31rpx;
					display: flex;
					font-weight: 400;
					font-size: 28rpx;
					color: #8F8FA1;


					.news {}

					.politics {
						margin-left: 101rpx;
					}

					.active {

						font-weight: bold;
						font-size: 28rpx;
						color: #070707;
						position: relative;
					}

					.active::after {
						content: '';
						width: 48rpx;
						height: 8rpx;
						background: #0874FA;
						border-radius: 4rpx;
						position: absolute;
						left: 50%;
						transform: translate(-50%);
						bottom: -12rpx;
					}


				}

				.ipt-wrap {
					display: flex;
					padding-left: 34rpx;

					justify-content: space-between;
					width: 100%;
					align-items: center;
					height: 75rpx;
					background: #F6F8F9;
					border-radius: 38rpx;

					input {
						height: 100%;
						width: 100%;
					}

					button {
						flex-shrink: 0;
						width: 112rpx;
						height: 74rpx;
						background: #0874FA;
						border-radius: 14rpx;
						line-height: 74upx;
						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;

					}
				}

				image {
					width: 31rpx;
					height: 31rpx;
				}
			}
		}
	}
</style>